/**
 * @link https://echarts.apache.org/examples
 */
import {ChartType, FunnelChartType, LineChartType, PieChartType, PolylineType} from "@/components/DataEcharts/EchartsType";

/**
 * 折线图数据统计
 * @param value
 * @constructor
 */
function LineChartHandling(value: LineChartType): any {
    const option: any = {
        tooltip: {trigger: 'axis', formatter: '{b},{c}'},
        grid: {top: "50px", left: "70px", right: "50px", bottom: "50px"},
        xAxis: {type: 'category', boundaryGap: true, data: value.labels},
        yAxis: {type: 'value'},
        series: [
            {
                data: value.values,
                type: value?.view === 'bar' ? 'bar' : 'line',
                smooth: !!value?.smooth,
                areaStyle: value?.solid ? {} : undefined,
                label: {
                    show: true, // 显示数字
                    position: 'top', // 数字显示在折点上方
                    formatter: value.unit ? `{c}${value.unit}` : '{c}' // 显示的数字内容，{c} 表示当前点的值
                }
            }
        ],
        toolbox: {
            show: true, feature: {magicType: {type: ['line', 'bar']}, saveAsImage: {}}
        }
    }
    if (value?.title) {
        option.title = {
            text: value.title,
            textStyle: {color: "#797a83", fontSize: 14},
            padding: [10, 10]
        }
    }
    return option
}

/**
 * 饼图数据统计
 * @param value
 * @constructor
 */
function PieChartHandling(value: PieChartType) {
    const option: any = {
        tooltip: {trigger: 'item'},
        legend: {orient: 'vertical', left: 15, top: 15},
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: value.values,
                emphasis: {itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
            }
        ],
        toolbox: {show: true, feature: {saveAsImage: {}}}
    }
    if (value?.title) {
        option.title = {text: value.title, left: 'center', top: 15}
    }
    return option
}


/**
 * 多线条统计图
 * @param value
 * @constructor
 */
function PolylineHandling(value: PolylineType): any {
    const series: any = [];
    for (let index in value.legend) {
        series.push({
            name: value.legend[index],
            type: 'line',
            areaStyle: value?.solid ? {} : undefined,
            emphasis: {focus: 'series'},
            data: value.values[index],
            label: {
                show: true
            }
        })
    }
    const option: any = {
        tooltip: {
            trigger: 'axis', axisPointer: {type: 'cross', label: {backgroundColor: '#6a7985'}}
        },
        toolbox: {
            show: true, feature: {magicType: {type: ['line', 'bar']}, saveAsImage: {}}
        },
        legend: {data: value.legend},
        grid: {top: "50px", left: "70px", right: "50px", bottom: "50px"},
        xAxis: [{type: 'category', boundaryGap: false, data: value.labels}],
        yAxis: [{type: 'value'}],
        series: series,
    }
    if (value?.title) {
        option.title = {text: value.title, textStyle: {color: "#797a83", fontSize: 14}, padding: [10, 10]}
    }
    return option
}


/**
 * 漏斗图数据处理
 * @constructor
 */
function FunnelChartHandling(value: FunnelChartType) {
    let max = 0
    let legendData = []
    for (let item of value.values) {
        legendData.push(item.name)
        if (max < item.value) max = item.value
    }
    const option: any = {
        tooltip: {trigger: 'item', formatter: '{b},{c}'},
        toolbox: {feature: {saveAsImage: {}}},
        legend: {data: legendData},
        series: [
            {
                type: 'funnel',
                top: 40,
                bottom: 20,
                width: '80%',
                min: 0,
                max: max,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {show: true, position: 'inside'},
                labelLine: {length: 10, lineStyle: {width: 1, type: 'solid'}},
                itemStyle: {borderColor: '#fff', borderWidth: 1},
                emphasis: {label: {fontSize: 20}},
                data: value.values
            }
        ]
    }
    if (value?.title) {
        option.title = {text: value.title, textStyle: {color: "#797a83", fontSize: 14}, padding: [10, 10]}
    }
    return option
}


/**
 * 折线图数据处理
 * @constructor
 */
export function ChartHandling(value: ChartType): any {
    if ((value as LineChartType).type === 'line-chart') {
        return LineChartHandling(<LineChartType>value)
    } else if ((value as PieChartType).type === 'pie-chart') {
        return PieChartHandling(<PieChartType>value)
    } else if ((value as PolylineType).type === 'polyline-category') {
        return PolylineHandling(<PolylineType>value)
    } else if ((value as FunnelChartType).type === 'funnel-chart') {
        return FunnelChartHandling(<FunnelChartType>value)
    }
}